<template>
  <div style="height:660px;">
    <div class="guide-wrap">
      <div class="guide-content">
        <img src="../../assets/guide.png" width="100%" height="100%" />
        <div class="steps step1 cf" data-index="1">
          <span class="step-num">1</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/init/book')">建账</p>
            <div class="guide-line" />
            <p class="size-12">设置账套名称、会计体系、启用期间、</p>
            <p class="size-12">科目级次、科目编码规则等</p>
          </div>
        </div>
        <div class="steps step2 cf" data-index="2">
          <span class="step-num">2</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/set/balance')">设置</p>
            <div class="guide-line" />
            <p class="size-12" @click="toPath('/set/file/coaList')">1.科目设置，增加下级科目，设置核算项</p>
            <p class="size-12" @click="toPath('/set')">2.辅助核算，增加或者修改辅助</p>
            <p class="size-12">核算项数据，自定义辅助核算项</p>
          </div>
        </div>
        <div class="steps step3 cf" data-index="3">
          <span class="step-num">3</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/init/balance')">期初余额</p>
            <div class="guide-line" />
            <p class="size-12">录入开账的期初余额</p>
            <p class="size-12">录入年初至截止启用期间的借贷发生额度</p>
          </div>
        </div>
        <div class="steps step4 cf" data-index="4">
          <span class="step-num">4</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/voucher/add')">凭证</p>
            <div class="guide-line" />
            <p class="size-12" @click="toPath('/voucher/add')">1.新增凭证</p>
            <p class="size-12" @click="toPath('/voucher/list')">2.查询凭证</p>
            <p class="size-12" @click="toPath('/voucher/auidt')">3.审核凭证</p>
            <p class="size-12" @click="toPath('/voucher/table')">4.凭证汇总表</p>
          </div>
        </div>
        <div class="steps step5 cf" data-index="5">
          <span class="step-num">5</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/accbook/totalaccount')">账簿</p>
            <div class="guide-line" />
            <p class="size-12">包括总账、明细账、科目余额表、</p>
            <p class="size-12">数量总账、数量明细账等各种</p>
            <p class="size-12">企业常用账簿</p>
          </div>
        </div>
        <div class="steps step6 cf" data-index="6">
          <span class="step-num">6</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/account/closePeriod')">结账</p>
            <div class="guide-line" />
            <p class="size-12">结账，进入下一个会计期间</p>
          </div>
        </div>
        <div class="steps step7 cf" data-index="7">
          <span class="step-num">7</span>
          <div class="step-dtl">
            <p class="bold pointer" @click="toPath('/report/debt')">报表</p>
            <div class="guide-line" />
            <p class="size-12" @click="toPath('/report/debt')">1.资产负债表</p>
            <p class="size-12" @click="toPath('/report/profit')">2.利润表</p>
          </div>
        </div>
        <div class="guide-tips" />
        <el-button type="primary" class="guide-download" round size="small" @click="downloadFile">手册下载</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import FileSave from 'file-saver'
export default {
  name: 'UseHelp',
  data() {
    return {
      info: {}
    }
  },
  methods: {
    downloadFile() {
      var oReq = new XMLHttpRequest()
      var URLToPDF = window.origin + '/drp/manual.pdf'
      oReq.open('GET', URLToPDF, true)
      oReq.responseType = 'blob'
      oReq.onload = function() {
        var file = new Blob([oReq.response], {
          type: 'application/pdf'
        })
        FileSave.saveAs(file, '使用手册.pdf')
      }
      oReq.send()
    },
    toPath(path) {
      this.$router.push(path)
    }
  }
}
</script>
<style scoped>
.guide-download {
    right: 20px;
    top: 20px;
    position: absolute;
}
.guide-wrap{height:100%;background:#fafcff}
.guide-wrap .guide-content{height:100%;width:100%;position:relative}
.guide-wrap .guide-content .steps{position:absolute;cursor:pointer}
.guide-wrap .guide-content .steps:hover .step-num{background:#0089bd;line-height: 60px}
.guide-wrap .guide-content .steps:hover .step-dtl .guide-line{background-position:0 -8px}
.guide-wrap .guide-content .steps .step-num{color:#fff;background:#56d2f5;font-size:26px;padding:2px 18px;border-radius:8px;float:left;width:50px;height:40px;box-sizing:border-box;margin-top:20px}
.guide-wrap .guide-content .steps .step-dtl{float:left}
.guide-wrap .guide-content .steps .step-dtl p{margin-bottom:5px;margin-top:5px;margin-left:10px}
.guide-wrap .guide-content .steps .step-dtl .size-12{font-size:12px}
.guide-wrap .guide-content .steps .step-dtl .bold{font-weight:700}
.guide-wrap .guide-content .steps .step-dtl .guide-line{background:url() no-repeat 50%;background-position:0 0;width:119px;height:6px}
.guide-wrap .guide-content .step1{left:12.5%;top:72.5%}
.guide-wrap .guide-content .step2{left:15.4%;top:34.5%}
.guide-wrap .guide-content .step3{left:31.8%;top:20.3%}
.guide-wrap .guide-content .step4{left:34.8%;top:55.5%}
.guide-wrap .guide-content .step5{left:56.0%;top:42.5%}
.guide-wrap .guide-content .step6{left:70.1%;top:21.5%}
.guide-wrap .guide-content .step7{left:78.9%;top:66.5%}
.guide-wrap .guide-content .guide-tips{background:url(../../assets/guideTxt.png) no-repeat 50%;left:20px;top:20px;width:477px;height:75px;position:absolute}
</style>
